import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
import videoFile from '../../../static/videos/demo.mp4';
import Accordion from '../../ch/components/Accordion.vue'
import AccordionItem from '../../ch/components/AccordionItem.vue'
import TranscriptionExample from '../../ch/demo/TranscriptionExample.vue'

<Meta
  title="Components/Video/Transcript"
/>

# Video transcript

A transcript is a list of all the words that are spoken in the video. If you host the video yourself and you have a related transcript, this additional content is added below the video player in an `Accordion` component. The transcript is not a replacement for captions, but it can be used to help people who are deaf or hard of hearing understand the video.


export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Accordion, AccordionItem, TranscriptionExample },
  template: `
    <div>
      <figure>
        <div class="ratio ratio--16/9">
          <video
              controls
              src="../../../static/videos/demo.mp4"
            />
        </div>
        <figcaption>Video label — © Author Name</figcaption>
      </figure>
      <Accordion id="1" spaced>
        <AccordionItem
          id="10"
          title="Transcript"
        >
          <TranscriptionExample />
        </AccordionItem>
      </Accordion>
    </div>
    `
})


<Canvas>
  <Story
    name="Example"
  >
    {Template.bind({})}
  </Story>
</Canvas>

